<%@page language="java" contentType="text/html; character=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>管理员后台</title>
    <link rel="stylesheet" href="${ctx}/resource/css/pintuer.css">
    <link rel="stylesheet" href="${ctx}/resource/css/admin.css">
    <style type="text/css">
        .popup {
            position: fixed;
            /*top: 50%;*/
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            width: 800px;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            display: none;
        }

        .popup-content {
            /* 弹窗内容的样式 */
        }
    </style>
    <script src="${ctx}/resource/js/jquery.js"></script>
    <script src="${ctx}/resource/js/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel">
    <form action="${ctx}/message/findBySql" id="listform" method="post">
        <div class="padding border-bottom">
            <ul class="search" style="padding-left: 10px;">
                <li>
                    <input type="text" placeholder="请输入姓名" name="name" class="input" value="${obj.name}"
                        style="width: 250px;line-height: 17px;display: inline-block" />
                    <a href="javascript:void(0)" onclick="changeSearch()" class="button border-main icon-search">搜索</a>
                </li>
            </ul>
        </div>
    </form>
    <table class="table table-hover text-center">
        <tr>
            <th>留言人姓名</th>
            <th>手机号</th>
            <th>留言内容</th>
            <th>回复内容</th>
            <th>回复时间</th>
            <th>操作</th>
        </tr>
    <c:forEach items="${pagers.datas}" var="data" varStatus="l">
        <tr>
            <td>${data.name}</td>
            <td>${data.phone}</td>
            <td>${data.content}</td>
            <td>${data.answerContent}</td>
            <td><fmt:formatDate value="${data.answerTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
            <td>

<%--                <a class="button border-red" href="${ctx}/message/delete?id=${data.id}"><span class="icon-trash-o">回复</span> </a>--%>
                <a class="button border-blue open-popup" data-content="${data.content}"  data-id="${data.id}"  href="javascript:void(0)"><span >回复</span> </a>
<%--                <button id="open-popup">打开弹窗</button>--%>
                <a class="button border-red" href="${ctx}/message/delete?id=${data.id}"><span class="icon-trash-o">删除</span> </a>
            </td>

        </tr>
    </c:forEach>
        <tr>
            <td colspan="8">
                <div class="pagelist">
                    <!--分页开始-->
                    <pg:pager url="${ctx}/message/findBySql" maxIndexPages="5" items="${pagers.total}" maxPageItems="15" export="curPage=pageNumber">
                        <pg:last>
                            共${pagers.total}记录，共${pageNumber}页，
                        </pg:last>
                        当前第${curPage}页
                        <pg:first>
                            <a href="${pageUrl}">首页</a>
                        </pg:first>
                        <pg:prev>
                            <a href="${pageUrl}">上一页</a>
                        </pg:prev>
                        <pg:pages>
                            <c:choose>
                                <c:when test="${curPage eq pageNumber}">
                                    <font color="red">[${pageNumber}]</font>
                                </c:when>
                                <c:otherwise>
                                    <a href="${pageUrl}">${pageNumber}</a>
                                </c:otherwise>
                            </c:choose>
                        </pg:pages>
                        <pg:next>
                            <a href="${pageUrl}">下一页</a>
                        </pg:next>
                        <pg:last>
                            <c:choose>
                                <c:when test="${curPage eq pageNumber}">
                                    <font color="red">尾页</font>
                                </c:when>
                                <c:otherwise>
                                    <a href="${pageUrl}">尾页</a>
                                </c:otherwise>
                            </c:choose>
                        </pg:last>
                    </pg:pager>
                </div>
            </td>
        </tr>
    </table>
</div>

<%--弹窗--%>
<div id="popup" class="popup">
    <div class="popup-content">
        <!-- 弹窗的内容 -->
        <div style="overflow: hidden">
            <span style="float: right; cursor: pointer;" onclick="(function (){
                $('#popup').hide();
            })()">x</span>
        </div>
        <form action="${ctx}/message/answer" method="post" class="form-x"  style="">
            <input name="id" type="hidden" />
            <div class="form-group">
                <div class="label"><label>留言内容：</label></div>
                <div style="padding: 7px 7px 7px 0" class="field">
                    <p style="margin-bottom: unset;  line-height: unset;" id="msg-content"></p>
<%--                    <input type="text" class="input w50" name="name" data-validate="required:请输入商品名称">--%>
<%--                    <div class="tips" title=""></div>--%>
                </div>
            </div>
            <div class="form-group">
                <div class="label"><label>回复内容：</label></div>
                <div class="field">
                    <input type="text" class="input w100" name="answerContent" data-validate="required:请输入回复内容">
                    <div class="tips" title=""></div>
                </div>
            </div>


            <div class="form-group">
                <div class="label"></div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit">提交</button>
                    <button onclick="(function (){
                         $('#popup').hide();
                    })()" class="button bg-main " type="button">关闭</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    function changeSearch(){
        $("#listform").submit();
    }

    $(document).ready(function() {

        $('table .open-popup').click(function() {

            var id = $(this).data("id");
            var content = $(this).data("content");
            $('#popup').find("form input[name='id']").val(id)
            $("#msg-content").text(content);
            // 显示弹窗
            $('#popup').show();
        });

        $('#close-popup').click(function() {
            // 关闭弹窗
            $('#popup').hide();
        });
    });
</script>
</body>

</html>